<template>
  <!-- <div> -->
  <div class="leftPop" ref="drag" @mousedown="moudedown">
    <!-- sfsdfsdfsdf -->
    <!-- 标题 -->
    <div class="top">
      <div class="top_1">
        事件详情
        <!-- 图标 -->
        <div class="left_icon" @click="closePop()">
          <n-icon size="18px" color="#fff">
            <CloseSharp></CloseSharp>
          </n-icon>
        </div>
      </div>
    </div>
    <!-- 虚线 -->
    <div class="center"></div>
    <!-- 下面展示信息 -->
    <div class="bottomInfo">
      <!-- ----------------- -->
      <div class="bottomInfo_1">
        <div class="bottomInfo1_1">事件状态:</div>
        <div class="bottomInfo2_2">
          <div class="bottomInfo2_2Pic"></div>
          待确定
        </div>
      </div>
      <!-- ---------------- -->
      <!-- 单独展示的每一项 -->
      <div class="bottomInfo_1" v-for="(item, index) in itemList" :key="index">
        <div class="bottomInfo1_1">{{ item.policeKey }}:</div>
        <!-- :&nbsp;&nbsp; -->
        <div class="bottomInfo2_2">
          {{ item.policeValue }}
        </div>
      </div>
      <!-- 匹配预案 -->
      <div class="match">
        <div class="match_1">匹配预案:</div>
        <!-- 图标 -->
        <div class="match_2">
          <div class="match2_2"></div>
          <div class="match2_2"></div>
        </div>
        <!-- 文字 -->
        <div class="match_3">
          <div class="match3_3">2023-9-21</div>
          <div class="match3_3">2023-9-21</div>
        </div>
      </div>
      <div></div>
    </div>
    <!-- 按钮 -->
    <div class="buttom" @mousedown.stop="">
      <button class="buttom_1" @click="handleLocClick">定位</button>
      <button @click="openPop()" class="buttom_2">确认</button>
    </div>
    <n-modal v-model:show="showLocPlan">
      <n-card
        closable
        @close="handleMapClose"
        style="width: 900px"
        title="选择路线"
        :bordered="false"
        size="small"
        role="dialog"
        aria-modal="true"
      >
        <PlanMap @close="handleMapClose"></PlanMap>
      </n-card>
    </n-modal>
  </div>
  <!-- </div> -->
</template>

<script lang="ts" setup>
import { CloseSharp } from "@vicons/ionicons5";
import AlarmConfirmation from "../../components/left/AlarmConfirmation.vue";
import planMap from "../../components/plan-map/index.vue";
import { ref } from "vue";
const showLocPlan = ref(false);
const emit = defineEmits(["closePopus", "openTwoP", "locClick"]);
const drag = ref();
const itemList: any = ref([
  // { policeKey: "事件状态", policeValue: "待确认" },
  { policeKey: "事件标题", policeValue: "发生火灾" },
  { policeKey: "事件类型", policeValue: "火灾" },
  { policeKey: "发生时间", policeValue: "2022.04.26 12:23" },
  { policeKey: "事件地点", policeValue: "办公大楼" },
  { policeKey: "事件描述", policeValue: "XXXXxxxxxxx" },
  { policeKey: "事件来源", policeValue: "巡逻录入" },
  { policeKey: "上报单位", policeValue: "2022.04.26 12:23" },
  { policeKey: "归属单位", policeValue: "安保部" },
  { policeKey: "指挥部成员", policeValue: "XX" },
  { policeKey: "预计完成时间", policeValue: "2022.04.26 12:23" },
]);

const moudedown = (ev: any) => {
  // console.log('ev', ev)
  let e = ev || event;
  let x = e.clientX - drag.value.offsetLeft; //鼠标点击坐标距离盒子左边缘的距离
  let y = e.clientY - drag.value.offsetTop; //鼠标点击坐标距离盒子上边缘的距离

  document.onmousemove = function (ev) {
    let e = ev || event;
    drag.value.style.left = ev.clientX - x + "px";
    drag.value.style.top = ev.clientY - y + "px";

    let bodyScreenX = ev.screenX;
    let bodyClientWidth = document.body.clientWidth;

    document.onmouseup = function (ev) {
      if (ev.clientX - x < 0) {
        drag.value.style.left = 0;
      } else if (bodyScreenX > bodyClientWidth) {
        drag.value.style.right = 0;
        drag.value.style.left = bodyClientWidth - 100 + "px";
      }
      document.onmousemove = null;
      document.onmouseup = null;
    };
  };
};

// 处理弹窗是否关闭
let handleClose = ref(false);
const handleLocClick = () => {
  showLocPlan.value = true;
};
/**
 * 关闭弹窗
 */
const closePop = () => {
  emit("closePopus");
  // console.log('关闭了')
};

// 打开二级弹窗
const openPop = () => {
  // handleClose.value = true
  emit("closePopus");
  emit("openTwoP");
};
const handleMapClose = () => {
  showLocPlan.value = false;
};
</script>

<style lang="scss" scoped>
.leftPop {
  position: absolute;
  width: 250px;
  // border: 1px solid red;
  // margin: 0 auto;
  transform: translateX(450px);
  // top:50%;
  // left:50%;
  // transform:translate(-50%,-50%);
  // margin-left: 450px;
  z-index: 17;
  // background-color: rgba(36, 85, 132, 0.3);
  background-image: url("../../assets/border/Group4866.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 10px 5px;

  .top {
    // border: 1px solid red;
    .top_1 {
      // font-size: ;
      color: #fff;
      // border: 1px solid rgb(45, 12, 12);
      font-weight: bold;
      position: relative;

      .left_icon {
        // border: 1px solid red;
        position: absolute;
        right: 0;
        top: 2px;
        height: 20px;
        margin: 0;
        padding: 0;
        cursor: pointer;
      }
    }
  }

  .center {
    border: 1px solid rgb(220, 221, 222);
    margin-top: 10px;
  }

  .bottomInfo {
    margin-top: 10px;
    // border: 1px solid red;

    .bottomInfo_1 {
      color: #fff;
      // border: 1px solid red;
      display: flex;
      // margin-bottom: 5px;
      padding: 5px 1px;
      font-size: 13px;

      // justify-content: space-around;
      .bottomInfo1_1 {
        // border: 1px solid red;
        font-family: PingFang SC-Medium, PingFang SC;
        color: #77c5ff;
        margin-right: 5px;
      }

      .bottomInfo2_2 {
        display: flex;
        align-items: center;

        // border: 1px solid red;
        .bottomInfo2_2Pic {
          background-image: url("../../assets/border/Group4881.png");
          width: 20px;
          height: 20px;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          margin-right: 5px;
        }
      }
    }

    .bottomInfo_1:nth-child(even) {
      background-color: rgba(21, 71, 111, 0.6);
    }

    .match {
      // border: 1px solid red;
      background-color: rgba(21, 71, 111, 0.6);
      padding: 5px 1px;

      .match_1 {
        color: #77c5ff;
        font-size: 13px;
      }

      .match_2 {
        // border: 1px solid red;
        margin-top: 5px;
        display: flex;
        align-items: center;
        justify-content: center;

        .match2_2 {
          margin-left: 20px;
          margin-right: 25px;
          width: 25px;
          height: 25px;
          background-image: url("../../assets/border/Group4864.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;
        }
      }

      .match_3 {
        // border: 1px solid red;
        // margin-top: 5px;
        display: flex;
        // align-items: center;
        justify-content: center;

        .match3_3 {
          margin: 0;
          // border: 1px solid red;

          // margin-left: 5px;
          // margin-right: 10px;
          // font-size: 5px;
          transform: scale(0.5);
          // width: 25px;
          // height: 25px;
          // background-image: url("../../assets/border/Group4864.png");
          // background-repeat: no-repeat;
          // background-size: 100% 100%;
        }
      }
    }
  }

  // 按钮
  .buttom {
    margin-top: 10px;
    display: flex;
    justify-content: center;

    .buttom_1 {
      cursor: pointer;
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 3px 30px;
      color: #fff;
      font-size: 13px;
      // background-color: #3f91e5;
      margin-right: 5px;
      background-image: url("../../assets/border/Group3037.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .buttom_2 {
      cursor: pointer;
      outline: none;
      border: none;
      border-radius: 5px;
      padding: 3px 30px;
      color: #fff;
      font-size: 13px;
      background-image: url("../../assets/border/Group3038.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      margin-left: 5px;
    }
  }
}
</style>
